<template>
    <div class='banner-bg'>
        <div class="banner-side">
            <ul class="banner-side-pointer">
                <li v-for="(item, indexP) in pointList" :key="item.p" :class="{point:isShow === indexP}"></li>
            </ul>
            <ul>
                <li v-for="(img, indexI) in imgList" :key="img.id" v-show="isShow === indexI">
                    <img src="@/assets/img/banner01.jpg" alt="">
                </li>
            </ul>
        </div>
    </div>
</template>

<script>
export default {
    data() {
        return {
            isShow: 0,
            // 测试数据
            pointList: [{ p: 1 }, { p: 2 }, { p: 3 }],
            imgList: [{ id: 1 }, { id: 2 }, { id: 3 }]
        };
    },
    mounted() {
        let num = 0;
        let len = 3;

        setInterval(() => {
            this.isShow = num;
            num = ++num == len ? 0 : num;
            this.isShow = num;
        }, 3000);
    }
};
</script>

<style lang='css' scoped>
.banner-bg {
    height: 600px;
}
.banner-bg .banner-side {
    position: relative;
    height: 100%;
    display: flex;
    justify-content: center;
    align-items: center;
    margin: 0 auto;
}
.banner-side .banner-side-pointer {
    position: absolute;
    margin: 260px auto 0;
}
.banner-side .banner-side-pointer > li {
    float: left;
    margin: 0px 8px;
    width: 10px;
    height: 10px;
    background-color: #fff;
    border-radius: 50%;
    opacity: 0.6;
}
.banner-side-pointer > li.point {
    opacity: 1;
}
</style>